<!-- 终端升级----上传弹窗 -->
<template>
  <bs-dialog
    class="upgrade-dialog"
    title="上传升级文件"
    :visible.sync="editor"
    size="large"
    @closed="doCloseEdit"
  >
    <template slot="main">
      <el-form
        :inline="true"
        :model="editorForm"
        ref="editorFormRef"
        label-width="120px"
        size="small"
      >
        <el-form-item label="文件" prop="fileName" label-width="70px">
          <el-input
            placeholder="选择升级文件"
            v-model="fileName"
            autocomplete="off"
            style="width: 300px"
            show-word-limit
            clearable
            @clear="handleFileReset"
          ></el-input>
        </el-form-item>
        <el-form-item prop="terminalType">
          <upload
            ref="uploadFile"
            :file-type="editorForm.terminalType"
            :file-list="fileList"
            :dir="uploadDir"
            :file-limit-size="1"
            @onChangeFilelist="changeFilelist"
            @onChangeProgress="changeProgress"
          >
          </upload>
        </el-form-item>
        <el-form-item label="终端版本" prop="ver" label-width="70px">
          <el-input
            placeholder="选择输入终端版本"
            v-model="editorForm.ver"
            autocomplete="off"
            style="width: 300px"
            show-word-limit
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="终端型号" prop="ver" label-width="70px">
          <el-input
            placeholder="选择输入终端型号"
            v-model="editorForm.model"
            autocomplete="off"
            style="width: 300px"
            show-word-limit
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
    </template>
    <template slot="footer">
      <bs-upload-button-icon
        :show-icon="false"
        btn-type="primary"
        @click.native.prevent="submitUpload"
      ></bs-upload-button-icon>
      <bs-reset-button-icon
        :show-icon="false"
        btn-type="primary"
        @click.native.prevent="handleReset"
      ></bs-reset-button-icon>
      <bs-close-button-icon
        :show-icon="false"
        :btn-type="btnType"
        @click.native.prevent="doCloseEdit"
      ></bs-close-button-icon>
    </template>
  </bs-dialog>
</template>

<script>
import Upload from './Upload'
import DeviceMonitorApi from '@/api/device'
import { Loading } from 'element-ui'
export default {
  name: 'FileUpgradeDialog',
  data() {
    return {
      uploadDir: '',
      editor: false,
      loading: null,
      editorForm: {
        ver: ''
      },
      btnType: '',
      fileList: [],
      fileName:'',
      file:'',
    }
  },
  created() {
    this.$eventBus.$on('showFileUpgradeDialog', this.show);
  },
  beforeDestroy() {
    this.$eventBus.$off('showFileUpgradeDialog');
  },
  components: {
      Upload
  },
  methods: {
    // 显示
    show(editorForm) {
      this.editorForm = editorForm;
      this.editor = true;
    },
    async submitUpload() {
      if(!this.file)
      {
        this.$alert('提示', '请先选择需要上传的文件')
        return;
      }
      if(!this.editorForm.ver) {
        this.$alert('提示', '请输入终端版本')
        return
      }
      if(!this.editorForm.model) {
        this.$alert('提示', '请输入终端型号')
        return
      }
      // const p = /^[1-9]\d?(\.(0|[1-9]\d?)){2}$/
      // if(!p.test(this.editorForm.ver)) {
      //   this.$alert('提示', '终端版本输入不合法')
      //   return
      // }
      if (this.loading === null) {
        this.loading = this.$loading({
          fullscreen: true,
          text: '正在上传',
        })
      }
      try {
        const res = await DeviceMonitorApi.uploadFile({file:this.file, terminalType:this.editorForm.terminalType,type:this.editorForm.type, ver: this.editorForm.ver, model: this.editorForm.model})
        if (this.loading) {
          this.loading.close()
          this.loading = null
        }
        this.editor = false
        this.handleReset()
        this.$refs.editorFormRef.clearValidate()
        this.$eventBus.$emit('refreshList')
      } catch (error) {
        if (this.loading) {
          this.loading.close()
          this.loading = null
        }
      }
      // const res = await DeviceMonitorApi.uploadFile({file:this.file, terminalType:this.editorForm.terminalType,type:this.editorForm.type})
      // alert(1111)
      // if (this.loading) {
      //   alert(222222)
      //   this.loading.close()
      //   this.loading = null
      // }
      // if(res.code == 200)
      // {
      //   this.editor = false
      //   this.handleReset()
      //   this.$refs.editorFormRef.clearValidate()
      //   this.$eventBus.$emit('refreshList')
      // }else{
      //   this.$message.error('文件上传失败,请重试')
      // }
      
      // this.$store
      //   .dispatch('device/uploadTerminalFile', {file:this.file, terminalType:this.editorForm.terminalType,type:this.editorForm.type})
      //   .then((res) => {
      //     if (this.loading) {
      //       this.loading.close()
      //       this.loading = null
      //     }
      //     if(res.code == 200)
      //     {
      //       this.editor = false
      //       this.handleReset()
      //       this.$refs.editorFormRef.clearValidate()
      //       this.$eventBus.$emit('refreshList')
      //     }else{
      //       this.$message.error('文件上传失败,请重试')
      //     }
      //   })
    },
    handleCurrentChange(row) {
      console.log(row)
    },
    changeFilelist(file) {
      this.file = file;
      this.fileName = file.name;
    },
    changeProgress() {

    },
    // 关闭
    doCloseEdit: function () {
      this.editor = false;
      this.handleReset();
    },
    handleDrag() {
      this.$refs.select.blur()
    },
    handleReset(){
      this.$set(this.editorForm, 'ver', '')
      this.file = '';
      this.fileName = '';
      this.$refs.uploadFile.$refs.upload.clearFiles();
    },
    handleFileReset(){
      this.file = '';
      this.fileName = '';
      this.$refs.uploadFile.$refs.upload.clearFiles();
    }
  }
}
</script>

<style lang="scss" scoped>
.upgrade-dialog{
    ::v-deep .el-dialog {
      width: 520px;
      height: 250px;
    }
}
</style>